var ch_box = document.querySelectorAll(".checking"),
	ch_all = document.querySelectorAll(".check_all")[0],
	count1 = document.getElementsByTagName("span")[0],
	count2 = document.querySelector(".checkup"),
	price = document.querySelectorAll(".price"),
	num = document.querySelectorAll(".number"),
	sum = document.querySelector(".sum"),
	total = sum.lastElementChild,
	edit = document.getElementsByTagName("span")[1],
	rec = document.querySelector(".rec"),
	end = document.querySelector(".endpr"),
	del = document.querySelector(".del");
var box = document.querySelectorAll(".num"),
	foot=document.querySelector("footer"),
	div=foot.getElementsByTagName("div");

count1.innerHTML = "共" + ch_box.length + "件商品";
ch_all.onclick = function() {
	var t=this.firstElementChild.src.indexOf("/img");
	this.firstElementChild.src = this.firstElementChild.src.slice(t+1) == "img/Q/check.png" ? "img/Q/checked.png" : "img/Q/check.png";
	//全选反选
	if(this.firstElementChild.src.slice(t+1) == "img/Q/checked.png") {
		ch_box.forEach(val => val.firstElementChild.src = "img/Q/checked.png");
		deled();
	} else {
		ch_box.forEach(val => val.firstElementChild.src = "img/Q/check.png");
	}
	//联动结算数目
	var n = 0;
	ch_box.forEach(val => {
		if(val.firstElementChild.src.slice(t+1) == "img/Q/checked.png") n++;
	})
	count2.innerHTML = "去结算(" + n + ")";
	cal()
}
for(var i = 0; i < ch_box.length; i++) {
	ch_box[i].onclick = function() {
		var t=this.firstElementChild.src.indexOf("/img");
		console.log(this.firstElementChild.src.slice(t+1));
		this.firstElementChild.src = this.firstElementChild.src.slice(t+1) == "img/Q/check.png" ? "img/Q/checked.png" : "img/Q/check.png";
		//计算要结算的商品数目，并渲染
		var n = 0;
		ch_box.forEach(val => {
			if(val.firstElementChild.src.slice(t+1) == "img/Q/checked.png") n++;
		})
		count2.innerHTML = "去结算(" + n + ")";
		//全选反选
		if(n == 0)
			ch_all.firstElementChild.src = "img/Q/check.png";
		if(n == ch_box.length)
			ch_all.firstElementChild.src = "img/Q/checked.png";

		//算已选中的总价
		cal();
	}

}
box.forEach(val => val.firstElementChild.setAttribute("disabled", true));
for(var i = 0; i < box.length; i++) {
	box[i].onclick = function() {
		var btn = this.getElementsByTagName("button");
		btn[0].setAttribute("disabled", true);
		var target = event.srcElement;
		if(target.tagName == "BUTTON") {
			if(target.innerText == "+") {
				target.previousElementSibling.innerHTML = parseInt(target.previousElementSibling.innerHTML) + 1;
			} else {
				target.nextElementSibling.innerHTML = parseInt(target.nextElementSibling.innerHTML) - 1;
			}
			if(btn[0].nextElementSibling.innerHTML == 1) {
				btn[0].disabled = true;
			} else {
				btn[0].disabled = false;
			}
			//更新总价
			cal();
		}
	}
}

function cal() {
	var tpr = 0;
	ch_box.forEach((val, i) => {
		var t=val.firstElementChild.src.indexOf("/img");
		if(val.firstElementChild.src.slice(t+1) == "img/Q/checked.png")
			tpr += parseFloat(price[i].innerHTML.replace(/[^0-9.]/ig, "")) * parseFloat(num[i].innerHTML);
	})
	total.innerHTML = "￥ " + tpr;
}
function deled(){
	console.log($(".deleted").html());
	$(".deleted").children().eq(0).attr("src","img/Q/check.png");
}
var dn=0
del.onclick=function(){
	ch_box.forEach(val => {
		var t=val.firstElementChild.src.indexOf("/img");
		if(val.firstElementChild.src.slice(t+1) == "img/Q/checked.png") {
			val.firstElementChild.src = "img/Q/check.png";
			val.className="cart_box deleted"
			val.parentNode.remove();
			dn++;
			console.log(val.className);
		}
	})
	//更新信息
	console.log(dn);
	count1.innerHTML = "共" + parseInt(ch_box.length-dn) + "件商品";
	//联动结算数目
	var n = 0;
	ch_box.forEach(val => {
		var t=val.firstElementChild.src.indexOf("/img");
		if(val.firstElementChild.src.slice(t+1) == "img/Q/checked.png"){ n++;console.log(n)}
		
	})
	count2.innerHTML = "去结算(" + n + ")";
	cal()
}
edit.onclick=function(){
	this.innerHTML=this.innerHTML=="编辑"?"完成":"编辑";
	rec.style.display=rec.style.display=="none"?"block":"none";
	end.style.display=end.style.display=="none"?"block":"none";
	count2.style.display=count2.style.display=="none"?"block":"none";
	sum.style.display=sum.style.display=="none"?"block":"none";
	del.style.display=del.style.display=="block"?"none":"block";
}
div[0].onclick=function(){
	location = "index.html";
}

